<template>
  <div>
    <el-alert v-show="props.isALert" class="m-b20" @close="handleClose">
      <p class="p13222 m-b5">
        <img class="m-b-2" src="@/assets/icons/p1.svg" alt="" srcset="" />
        Only the orders which product(s) source from ScaleOrder will be display
        on the page. After paid, the orders will be shipped out within 1-2 work
        days. After ship, we will mark your shop's orders as fulfilled with
        tracking code. How it works?
      </p>
      <p class="p13222">
        <img class="m-b-2" src="@/assets/icons/p2.svg" alt="" srcset="" />
        All packages will be deliver to your customer directly and they won't
        know ScaleOrder at all.
      </p>
    </el-alert>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps(["isALert"]);
const emit = defineEmits(["update:isALert"]);

const handleClose = () => {
  emit("update:isALert", false);
};
console.log(props.isALert);
</script>
<style lang="scss" scoped>
.el-alert {
  background-color: transparent;
  border-radius: 4px;
  border: 1px dashed #c7cdd5;
  padding: 10px 2px;
  margin-bottom: 20px;

  .m-b-2 {
    margin-bottom: -2px;
    margin-right: 5px;
  }
  .p13222 {
    width: 90%;
    line-height: 16px;
  }
}
</style>
